<template>
  <div class="">
    <div id="redzone">
    </div>
  </div>
</template>

<script>
// import axios from 'axios';
// import qs from 'qs';

export default {
  name: 'Hongbao',
  data() {
    return {}
  },
  computed: {
  },
  methods: {
    addBao: function (left, height, src) {
      var div = document.createElement('div');
      var img = document.createElement('img');
      div.appendChild(img);
      img.className = 'roll';
      img.src = src;
      div.style.left = left + 'px';
      div.style.height = height + 'px';
      div.className = 'redBox';
      document.getElementById('redzone').appendChild(div);
      let timer = setTimeout(function () {
        document.getElementById('redzone').removeChild(div);
        //  console.log(window.innerHeight);
        // 清除定时器
        clearTimeout(timer);
        timer = null
      }, 3000);
    }

  },
  mounted() {
    let vueObject = this;
    setInterval(function () {
      var left = Math.random() * document.body.scrollWidth;
      var height = Math.random() * document.body.scrollHeight;
      // console.log('height', height)
      var src = require('./static/img/hongbao.png');
      vueObject.addBao(left, height, src);
    }, 500);
  }
}
</script>
<style>
@keyframes redImg {
  0% {
    top: 0;
  }

  100% {
    top: 100%;
  }
}

.redBox {
  position: absolute;
  /* opacity: 0;*/
  z-index: 10000;
  animation: redImg 3s infinite linear;
  -webkit-animation: redImg 3s infinite linear;
  -moz-animation: redImg 3s infinite linear;
  -ms-animation: redImg 3s infinite linear;
  -o-animation: redImg 3s infinite linear;
  pointer-events: none;
  opacity: 0.8;
}

.redBox {
  position: fixed;
}

.redBox img {
  display: block;
  width: 3rem;
  height: 4rem;
  object-fit: contain;
}
</style>
